<template>
	<div class="cash-page">
		<back title="提现"></back>
		<div class="cash-content">
			<div class="cash-item">
				<label for="bankname">开户银行:</label>
				<input type="text" v-model.trim="bankname" id="bankname" readOnly onfocus="this.blur()" @click="showBlankPick" placeholder="请选择银行">
			</div>
			<div class="cash-item">
				<label for="bankno">银行卡号:</label>
				<input type="text" v-model.trim="bankno" id="bankno" placeholder="请输入银行卡号">
			</div>
			<div class="cash-item">
				<label for="username">账户名字:</label>
				<input type="text" v-model.trim="username" id="username" placeholder="请输入账户名字">
			</div>
			<div class="cash-item">
				<label for="cashmoney">提现金额:</label>
				<input type="text" v-model.trim="cashmoney" id="cashmoney" placeholder="请输入提现金额">
			</div>
			<div class="cash-item">
				<button type="button" class="submit" @click="createWithDraw">提交</button>
			</div>
		</div>
	</div>
</template>

<script>
  	const banklist = [{text: "中国农业银行"},{text: "中国建设银行"},{text: "中国工商银行"},{text: "交通银行"},{text: "中国邮政储蓄银行"},{text: "中国银行"},{text: "中国光大银行"},{text: "招商银行"},{text: "浦发银行"},{text: "中信银行"},{text: "华夏银行"},{text: "中国民生银行"},{text: "广发银行"},{text: "平安银行"},{text: "兴业银行"},{text: "恒丰银行"},{text: "浙商银行"},{text: "渤海银行"}];
	export default {
		data(){
			return{
				blankpicker: null,
				bankname:'',
				bankno:'',
				username:'',
				cashmoney:''
			}
		},
		methods:{
			createWithDraw(){
				if(!this.bankname || !this.bankno || !this.username || !this.cashmoney){
					this.createToast('表单不能有空','error')
					return;
				}
				let reg = /^([1-9]{1})(\d{14}|\d{18})$/;
				if(!reg.test(this.bankno)){
					this.createToast('银行卡格式不正确','error')
					return;
				}
				let rega = /^[1-9]\d*$/
				if(!rega.test(this.cashmoney)){
					this.createToast('金额只能是正整数','error')
					return;
				}
				this.$http.post(`/WithDraw/createWithDraw`,{
					bankName:this.bankname,
					cardNo:this.bankno,
					userName:this.username,
					money:this.cashmoney
				}).then( res => {
					console.log(res)
					if(res.code == 200){
						this.createToast(res.msg,'correct')
						this.cashmoney = ''
					}else{
						this.createToast(res.msg,'error')
					}
				})
			},
			createToast(text,type){
				const toast = this.$createToast({
					time: 1000,
					txt: text,
					type:type
				})
				toast.show()
			},
			showBlankPick() {
				if (!this.blankpicker) {
				this.blankpicker = this.$createPicker({
					title: "选择银行",
					data: [banklist],
					onSelect: this.selectHandleblank,
					onCancel: this.cancelHandle
				});
				}
				this.blankpicker.show();
			},
			selectHandleblank(selectedVal, selectedIndex, selectedText) {
				this.bankname = selectedText[0]
			},
		}
	}
</script>

<style lang="stylus">
.cash-page{
	padding-top 60px
	background #f1f1f1
	.cash-content{
		padding 0 15px
		.cash-item{
			background #fff
			margin-bottom 15px
			display flex
			align-items center
			padding 10px 5px
			line-height 30px
			border-radius 5px
			position relative
			label{
				min-width 90px
				font-size 16px
			}
			input{
				font-size 14px
				width 100%
				height 30px
				line-height 30px
			}
			&:nth-child(1):after{
				display block
				content ""
				width 0
				height 0
				border-width 6px
				border-style solid 
				border-color #999 transparent transparent
				position absolute
				top 25px
				right 10px
			}
			&:last-child{
				padding 0 
			}
			.submit{
				width 100%
				height 40px
				background: linear-gradient(to right , #3b79e7, #3563db);
				color #fff
				font-size 16px
				border-radius 5px
			}
		}

		
	}
}
</style>
